<template>
  <div>
    <div class="top">
      <div class="top_left">
        <span class="textA">直流电源</span>/<span class="textB">拓扑展示</span>
      </div>
      <div id="container"></div>
    </div>
  </div>
</template>
<script>
import Konva from 'konva';
import {getPowerinfor} from "@/api"
import test from "./test"
import {konvaInitAndSetEvent, konvaInitializeDrawing, layerAdd, layerAddImg} from "@/views/test/util";

export default {
  data() {
    return {
      listA: {},
      listB: {},
      stage: {},
      DC_cabinet: [],
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    initStage(data) {
      this.listA = data.A;
      this.listB = data.B;
      this.stage = new Konva.Stage({
        container: 'container',
        width: window.innerWidth,
        height: window.innerHeight - 32,
        draggable: true
      });
      konvaInitAndSetEvent(this.stage)
      const layer = new Konva.Layer();
      konvaInitializeDrawing(layer)
      if(this.listA){
        let pgBranchLength = this.listA.pgBranch.length
        let AccumulatedHeight = 0
        let TotalHeight = 0
        this.listA.pgBranch.forEach((item) => { TotalHeight += ((item.branchTotal.A.length + item.branchTotal.B.length) || 2 ) * 100 })
        layerAdd('Rect',{x: 850, y: 260 - (pgBranchLength + 1) * 80, width: 400, height: (pgBranchLength + 1) * 80, stroke: 'black', strokeWidth: 2},layer)
        layerAdd('Line',{points: [1050, 220, 1050, 220 - pgBranchLength * 80], stroke: '#ff0000', strokeWidth: 2, lineCap: 'round', lineJoin: 'round'},layer)

        layerAdd('Text',{x: 860, y: 260 - (pgBranchLength + 1) * 80 + 10, text: this.listA.location, fontSize: 18, fill: '#000' },layer)
        // 第一列柜子名称
        layerAdd('Text',{x: 860, y: 25, text: this.listA.switchName, fontSize: 14, fill: '#000' },layer)

        layerAdd('Text',{x: 860, y: 80, text: `电压:${this.listA.avoltage} V`, fontSize: 14, fill: '#000' },layer)
        layerAdd('Text',{x: 860, y: 110, text: `电流:${this.listA.acurrent} A`, fontSize: 14, fill: '#000' },layer)
        layerAdd('Text',{x: 860, y: 140, text: `功率:${this.listA.apower} W`, fontSize: 14, fill: '#000' },layer)
        this.listA.pgBranch.forEach((item, index) => {
          layerAdd('Line',{points: [1050, 220 - index * 80 - 40, 1350, 220 - index * 80 - 40], stroke: '#ff0000', strokeWidth: 2, lineCap: 'round', lineJoin: 'round'},layer)
          layerAddImg(layer,{x: 1100,y: 220 - (index + 1) * 80 + 6,width: 70,height: 70},'switch')

          // 第二列柜子名称
          layerAdd('Text',{x: 1100, y: 220 - (index + 1) * 80 + 6, text: item.switchFirstName, fontSize: 14, fill: '#000' },layer)
          // 绘制直流屏
          let dynamicHeight = (([item.branchTotal.A.length,item.branchTotal.B.length].sort()[1]) || 2 ) * 150
          this.DC_cabinet.push(layerAdd('Rect',{x: 1800, y:  AccumulatedHeight + index * 150 - TotalHeight/2, width: 400, height: dynamicHeight + 100, stroke: 'black', strokeWidth: 2},layer))
          //  屏柜名称
          layerAdd('Text',{x: 1810, y: AccumulatedHeight + index * 150 - TotalHeight/2 +10, text: item.location, fontSize: 18, fill: '#000' },layer)

          // 连线
          layerAdd('Line',{points: [1350, 220 - index * 80 - 40, 1750, this.DC_cabinet[index].attrs.y + this.DC_cabinet[index].attrs.height*.35], stroke: '#ff0000', strokeWidth: 2, lineCap: 'round', lineJoin: 'round'},layer)
          layerAdd('Line',{points: [1350, 320 + index * 80 + 40, 1750, this.DC_cabinet[index].attrs.y + this.DC_cabinet[index].attrs.height*.65], stroke: '#0000ff', strokeWidth: 2, lineCap: 'round', lineJoin: 'round'},layer)
          // 进柜线
          layerAdd('Line',{points: [1750, this.DC_cabinet[index].attrs.y + this.DC_cabinet[index].attrs.height*.35, 1950, this.DC_cabinet[index].attrs.y + this.DC_cabinet[index].attrs.height*.35], stroke: '#ff0000', strokeWidth: 2, lineCap: 'round', lineJoin: 'round'},layer)
          layerAdd('Line',{points: [1750, this.DC_cabinet[index].attrs.y + this.DC_cabinet[index].attrs.height*.65, 1950, this.DC_cabinet[index].attrs.y + this.DC_cabinet[index].attrs.height*.65], stroke: '#0000ff', strokeWidth: 2, lineCap: 'round', lineJoin: 'round'},layer)
            // A路分支总开名称
          layerAdd('Text',{x: 1850, y: this.DC_cabinet[index].attrs.y + this.DC_cabinet[index].attrs.height*.35 - 50, text: item.switchName, fontSize: 14, fill: '#000' },layer)


          layerAdd('Text',{x: 1810, y: this.DC_cabinet[index].attrs.y + this.DC_cabinet[index].attrs.height*.35 - 50 + 55, text: `电压:${item.avoltage} V`, fontSize: 14, fill: '#000' },layer)
          layerAdd('Text',{x: 1810, y: this.DC_cabinet[index].attrs.y + this.DC_cabinet[index].attrs.height*.35 - 50 + 85, text: `电流:${item.acurrent} A`, fontSize: 14, fill: '#000' },layer)
          layerAdd('Text',{x: 1810, y: this.DC_cabinet[index].attrs.y + this.DC_cabinet[index].attrs.height*.35 - 50 + 115, text: `功率:${item.apower} W`, fontSize: 14, fill: '#000' },layer)

        // // B路分支总开名称
        //   layerAdd('Text',{x: 1850, y: this.DC_cabinet[index].attrs.y + this.DC_cabinet[index].attrs.height*.65 - 50, text: item.switchName, fontSize: 14, fill: 'yellow' },layer)

          layerAdd('Text',{x: 1810, y: this.DC_cabinet[index].attrs.y + this.DC_cabinet[index].attrs.height*.65 - 50+ 55, text: `电压:${item.avoltage} V`, fontSize: 14, fill: '#000' },layer)
          layerAdd('Text',{x: 1810, y: this.DC_cabinet[index].attrs.y + this.DC_cabinet[index].attrs.height*.65 - 50+ 85, text: `电流:${item.acurrent} A`, fontSize: 14, fill: '#000' },layer)
          layerAdd('Text',{x: 1810, y: this.DC_cabinet[index].attrs.y + this.DC_cabinet[index].attrs.height*.65 - 50+ 115, text: `功率:${item.apower} W`, fontSize: 14, fill: '#000' },layer)


          // 开关
          layerAddImg(layer,{x: 1850,y: this.DC_cabinet[index].attrs.y + this.DC_cabinet[index].attrs.height*.35 - 35 ,width: 70,height: 70},'switch')
          layerAddImg(layer,{x: 1850,y: this.DC_cabinet[index].attrs.y + this.DC_cabinet[index].attrs.height*.65 - 35 ,width: 70,height: 70},'switch')
          // 进柜竖线
          layerAdd('Line',{points: [1950, this.DC_cabinet[index].attrs.y + 20, 1950, this.DC_cabinet[index].attrs.y + this.DC_cabinet[index].attrs.height*.5 - 20 ], stroke: '#ff0000', strokeWidth: 2, lineCap: 'round', lineJoin: 'round'},layer)
          layerAdd('Line',{points: [1950, this.DC_cabinet[index].attrs.y + 20 + this.DC_cabinet[index].attrs.height*.5, 1950, this.DC_cabinet[index].attrs.y - 20 + this.DC_cabinet[index].attrs.height], stroke: '#0000ff', strokeWidth: 2, lineCap: 'round', lineJoin: 'round'},layer)

          item.branchTotal.A.forEach((item1,index1) => {
            layerAdd('Line',{points: [1950, this.DC_cabinet[index].attrs.y + (index1+1) * 75 , 2250, this.DC_cabinet[index].attrs.y + (index1+1) * 75 ], stroke: '#ff0000', strokeWidth: 2, lineCap: 'round', lineJoin: 'round'},layer)
            layerAddImg(layer,{x: 2000,y: this.DC_cabinet[index].attrs.y + (index1+1) * 75 - 35 ,width: 70,height: 70},'switch')

            let name =  item1.switchName + ' 电压：' + item1.avoltage +'V' + ' 电流：' + item1.acurrent +'A' + ' 功率：' + item1.apower +'W'
            layerAdd('Text',{x: 2000, y: this.DC_cabinet[index].attrs.y + (index1+1) * 75 - 35, text: name, fontSize: 14, fill: '#000' },layer)

            let compatibleHeight = 100/item.branchTotal.A.length
            // 终端设备
            layerAdd('Rect',{x: 2600, y: this.DC_cabinet[index].attrs.y + (150+compatibleHeight)*(index1), width: 400, height: (150+compatibleHeight), stroke: '#000', strokeWidth: 2},layer)
            // 终端设备图片 terminalDev
            layerAddImg(layer,{x: 2650,y: this.DC_cabinet[index].attrs.y + (150+compatibleHeight)*(index1) + 5,width: 75,height: (150+compatibleHeight)},'terminalDev',false)
            // 终端设备名称
            layerAdd('Text',{x: 2650, y: this.DC_cabinet[index].attrs.y + (150+compatibleHeight)*(index1) + 15, text: `OTN${index1 + 1}`, fontSize: 18, fill: '#000' },layer)

            layerAdd('Line',{points: [2550, this.DC_cabinet[index].attrs.y + (150+compatibleHeight)*(index1) + (150+compatibleHeight) * .35, 2700, this.DC_cabinet[index].attrs.y + (150+compatibleHeight)*(index1) + (150+compatibleHeight) * .35 ], stroke: '#ff0000', strokeWidth: 2, lineCap: 'round', lineJoin: 'round'},layer)
            layerAdd('Line',{points: [2550, this.DC_cabinet[index].attrs.y + (150+compatibleHeight)*(index1) + (150+compatibleHeight) * .65, 2700, this.DC_cabinet[index].attrs.y + (150+compatibleHeight)*(index1) + (150+compatibleHeight) * .65 ], stroke: '#0000ff', strokeWidth: 2, lineCap: 'round', lineJoin: 'round'},layer)

            // 绘制直流屏 连线 终端设备
            layerAdd('Line',{points: [2250, this.DC_cabinet[index].attrs.y + (index1+1) * 75, 2550, this.DC_cabinet[index].attrs.y + (150+compatibleHeight)*(index1) + (150+compatibleHeight) * .35 ], stroke: '#ff0000', strokeWidth: 2, lineCap: 'round', lineJoin: 'round'},layer)
            layerAdd('Line',{points: [2250, this.DC_cabinet[index].attrs.y + this.DC_cabinet[index].attrs.height*.5 + (index1+1) * 75 , 2550, this.DC_cabinet[index].attrs.y + (150+compatibleHeight)*(index1) + (150+compatibleHeight) * .65 ], stroke: '#0000ff', strokeWidth: 2, lineCap: 'round', lineJoin: 'round'},layer)
          })
          item.branchTotal.B.forEach((item1,index1) => {
            layerAdd('Line',{points: [1950, this.DC_cabinet[index].attrs.y + this.DC_cabinet[index].attrs.height*.5 + (index1+1) * 75 , 2250, this.DC_cabinet[index].attrs.y + this.DC_cabinet[index].attrs.height*.5 + (index1+1) * 75 ], stroke: '#0000ff', strokeWidth: 2, lineCap: 'round', lineJoin: 'round'},layer)
            layerAddImg(layer,{x: 2000,y: this.DC_cabinet[index].attrs.y + this.DC_cabinet[index].attrs.height*.5 + (index1+1) * 75 - 35 ,width: 70,height: 70},'switch')


            let name =  item1.switchName + ' 电压：' + item1.avoltage +'V' + ' 电流：' + item1.acurrent +'A' + ' 功率：' + item1.apower +'W'
            layerAdd('Text',{x: 2000, y: this.DC_cabinet[index].attrs.y + this.DC_cabinet[index].attrs.height*.5 + (index1+1) * 75 - 35, text: name, fontSize: 14, fill: '#000' },layer)
          })

          AccumulatedHeight += dynamicHeight
        })
      }

      if(this.listB){
        let pgBranchLength = this.listB.pgBranch.length
        layerAdd('Rect',{x: 850, y: 300, width: 400, height: (pgBranchLength + 1) * 80, stroke: 'black', strokeWidth: 2},layer)
        layerAdd('Line',{points: [1050, 320, 1050, 320 + pgBranchLength * 80], stroke: '#0000ff', strokeWidth: 2, lineCap: 'round', lineJoin: 'round'},layer)
        
        layerAdd('Text',{x: 860, y: 300 + 10, text: this.listB.location, fontSize: 18, fill: '#000' },layer)

        // 第一列柜子名称
        layerAdd('Text',{x: 860, y: 425, text: this.listB.switchName, fontSize: 14, fill: '#000' },layer)

        layerAdd('Text',{x: 860, y: 480, text: `电压:${this.listB.avoltage} V`, fontSize: 14, fill: '#000' },layer)
        layerAdd('Text',{x: 860, y: 510, text: `电流:${this.listB.acurrent} A`, fontSize: 14, fill: '#000' },layer)
        layerAdd('Text',{x: 860, y: 540, text: `功率:${this.listB.apower} W`, fontSize: 14, fill: '#000' },layer)

        this.listB.pgBranch.forEach((item, index) => {
          layerAdd('Line',{points: [1050, 320 + index * 80 + 40, 1350, 320 + index * 80 + 40], stroke: '#0000ff', strokeWidth: 2, lineCap: 'round', lineJoin: 'round'},layer)
          layerAddImg(layer,{x: 1100,y: 320 + (index) * 80 + 6,width: 70,height: 70},'switch')
          // 第二列柜子名称对
          layerAdd('Text',{x: 1100, y: 320 + (index) * 80 + 6, text: item.switchFirstName, fontSize: 14, fill: '#000' },layer)
                  // B路分支总开名称
         layerAdd('Text',{x: 1850, y: this.DC_cabinet[index].attrs.y + this.DC_cabinet[index].attrs.height*.65 - 50, text: item.switchName, fontSize: 14, fill: '#000' },layer)
        })
      }

      this.stage.add(layer);
      this.stage.draw();
    },
    getData() {
      getPowerinfor().then(res=>{
        this.initStage(res.data);
        // this.initStage(test.mData);
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>